<!--
 * @Author: zjj
 * @Date: 2019-09-27 08:43:50
 * @LastEditors  : zjj
 * @LastEditTime : 2020-01-19 17:03:18
 -->
<!--  -->
<template>
  <div class="activities">
    <Nav :title="title">
      <template v-slot:left>
        <span class="back" @click=" $router.back()"></span>
      </template>
    </Nav>
    <div class="pd-10" v-if="$route.params.id==5" v-html="detail"></div>
    <div v-else v-html="detail"></div>
     <router-link
      tag="div"
      class="back-home flex aligin-center"
      :to="{path:'/index/home'}"
      v-if="$route.query.code"
     >
      <span class="ml-4 mr-4">&lt;</span>
      <span>返回</span>
    </router-link>
  </div>
</template>

<script>
import { articleDetail } from "../api/api";
import Nav from "../components/Nav";
export default {
  components: { Nav },
  data() {
    return {
      detail: "",
      title: "",
      activityDetail:{}
    };
  },
  computed: {},
  watch: {},
  methods: {
     _shareConfig(jsk) {
      // jsk.debug=true
      wx.config(jsk);
      wx.ready(() => {
        wx.updateTimelineShareData({
          title: this.activityDetail.title, // 分享标题
          link:
            window.location.origin +
            window.location.pathname+"?code=10", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.activityDetail.image, // 分享图标
          success: function() {
            // 设置成功
          }
        });
        wx.updateAppMessageShareData({
          title: this.activityDetail.title, // 分享标题
          link:
            window.location.origin +
            window.location.pathname+"?code=10" ,// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          desc:
            this.activityDetail.short_title ||
            "兰溪官方特色购物平台。", // 分享描述
          imgUrl: this.activityDetail.image, // 分享图标
          success: function() {
            // 设置成功
          }
        });
      });
      wx.error(res => {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    },
  },
  created() {
  },
  mounted() {
    articleDetail({ id: this.$route.params.id }).then(
      ({ data: { result } }) => {
        this.activityDetail=result
        this.title=result.title
        const regex = new RegExp("<img", "gi");
        this.detail = result.content.replace(
          regex,
          `<img style="max-width: 100%; height: auto;display:block"`
        );
           // 分享
        if (typeof wx != "undefined") {
          //分享产品不配置
            this._shareConfig(result.jsk);
        }
      }
    );
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.activities {
  height: 100%;
}
.pd-10 {
  padding: 10px;
}
.back-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.back-home {
    position: fixed;
    bottom: 200px;
    left: 0;
    height: 30px;
    width: 60px;
    background: #f3515a;
    color: #fff;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    font-size: 16px;
    line-height: 26px;
  }
</style>